<?php
//include '../includes/01_head.php';
//include '../includes/02_menu.php';
include APPPATH . 'views/views_backend/00_includes/01_head.php';

?>
<div class="l-h-32 g-d-w  b-r-t-4 p-l-20 b-d-b-c-ccc dotum- p-r">
    <span>Backend</span>
    <span class="arrow_space"></span>
    <span>Layout  </span>
    
    <div class="p-a t-8 r-8 l-h-16 z-i-100">
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p menu-icon" onclick="accessdenied()" title="Menu">Menu</span>
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p fullscreen-icon" onclick="$('.container_24').toggleClass('uncontenter')" title="Full Screen">Full Screen</span>
    </div>
</div>
<div class="jqx-hideborder jqx-hidescrollbars" id="jqxTabBackend">
    <ul>
        <li style="margin-left: 3px;">Home</li>
        <li>About</li>
        <li>News</li>
        <li>Product</li>
    </ul>
    <div>
        <div class="jqx-hideborder jqxPanel">
            <div class="p-12">
                <div class="colp_3">
                    <div class="b-d-c-ccc colp_container box-sizing-border-box">
                        <div class="b-d-b-c-ccc h-g-1 box-sizing-border-box h-b-ef">① Head</div>
                        <div class="b-d-b-c-ccc l-h-20 box-sizing-border-box h-b-ef">② Menu</div>
                        <div class="b-d-b-c-ccc h-g-2 box-sizing-border-box h-b-ef">③ Slider</div>
                        <div class="f-l b-d-r-c-ccc box-sizing-border-box h-g-4 colp_3 h-b-ef">⑤ Nav</div>
                        <div class="f-l h-g-4 box-sizing-border-box colp_7 h-b-ef">⑥ Con</div>
                        <div class="clear"></div>
                        <div class="l-h-20 b-d-t-c-ccc box-sizing-border-box h-b-ef">④ Foot</div>
                    </div>
                </div>
                <div class="colp_7">
                    <div class="p-l-12">
                        <div class="b-d-c-ccc colp_container box-sizing-border-box p-r">
                            <div class="colg_4"><div class="b-d-r-c-ccc p-21-9 h-b-ef"><div class="p-a">① Customer 01</div></div></div>
                            <div class="colg_4"><div class="b-d-r-c-ccc p-21-9 h-b-ef"><div class="p-a">② Customer 02</div></div></div>
                            <div class="colg_4"><div class="p-21-9 h-b-ef"><div class="p-a">③ Customer 03</div></div></div>
                        </div>
                        
                        <div class="b-d-c-ccc colp_container box-sizing-border-box p-r m-t-8">
                            <div class="colg_3"><div class="b-d-r-c-ccc p-16-9 h-b-ef"><div class="p-a">① Service 01</div></div></div>
                            <div class="colg_3"><div class="b-d-r-c-ccc p-16-9 h-b-ef"><div class="p-a">② Service 02</div></div></div>
                            <div class="colg_3"><div class="b-d-r-c-ccc p-16-9 h-b-ef"><div class="p-a">③ Service 03</div></div></div>
                            <div class="colg_3"><div class="p-16-9 h-b-ef"><div class="p-a">④ Service 04</div></div></div>
                        </div>
                        
                        <div class="b-d-c-ccc colp_container box-sizing-border-box p-r m-t-8">
                            <div class="colg_2"><div class="b-d-r-c-ccc p-16-9 h-b-ef"><div class="p-a">① Product 01</div></div></div>
                            <div class="colg_2"><div class="b-d-r-c-ccc p-16-9 h-b-ef"><div class="p-a">② Product 02</div></div></div>
                            <div class="colg_2"><div class="b-d-r-c-ccc p-16-9 h-b-ef"><div class="p-a">③ Product 03</div></div></div>
                            <div class="colg_2"><div class="b-d-r-c-ccc p-16-9 h-b-ef"><div class="p-a">④ Product 04</div></div></div>
                            <div class="colg_2"><div class="b-d-r-c-ccc p-16-9 h-b-ef"><div class="p-a">⑤ Product 05</div></div></div>
                            <div class="colg_2"><div class="p-16-9 h-b-ef"><div class="p-a">⑥ Product 06</div></div></div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div>
        <div class="jqx-hideborder jqxPanel">	
            Updating...
        </div>	
    </div>
    <div>
        <div class="jqx-hideborder jqxPanel">	
            Updating...
        </div>	
    </div>
    <div>
        <div class="jqx-hideborder jqxPanel">	
            Updating...
        </div>	
    </div>
</div>

<div class="l-h-32 g-d-w p-l-20 b-d-b-c-ccc b-d-t-c-ccc dotum- p-r">
    <span>Backend</span>
    <span class="arrow_space"></span>
    <span>Layout  </span>
    
    <div class="p-a t-8 r-8 l-h-16 z-i-100">
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p add-icon" onclick="Categories.AddItem();" title="Add">Add</span>
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p refresh-icon" onclick="Categories.Refresh()" title="Refresh">Refresh</span>
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p setting-icon" onclick="Categories.Setting()" title="Setting">Setting</span>
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p menu-icon" onclick="accessdenied()" title="Menu">Menu</span>
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p fullscreen-icon" onclick="$('.container_24').toggleClass('uncontenter')" title="Full Screen">Full Screen</span>
    </div>
</div>
<div class="jqx-hideborder jqx-hidescrollbars" id="jqxTabBackendCategoryType" style="border-top: 1px solid #ccc">
    <ul>
        <?php
        $n=true;
        foreach ($CategoryType as $c){
            if($n)$ifrst='style="margin-left:3px"';
            echo "<li $ifrst>$c</li>";$n=false;
        }
        ?>
    </ul>
    <?php
    foreach ($CategoryType as $c){
        echo "<div></div>";
    }
    ?>
</div>
<br/>
<div id="jqxGrid_Backend_Categories" style="border-left: none;border-right: none;border-bottom: none"></div>
<div id="category_edit_panel"></div>
<div id="category_edit_panel_popup"></div>
<div class="l-h-28 g-d-w  b-r-b-4 p-l-20 b-d-t-c-ccc dotum- p-r">
    <div class="l-h-16 z-i-100 p-b-8 p-t-8 dotum">
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p add-icon" onclick="Categories.AddItem()" title="Add">Add</span>
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p refresh-icon" onclick="Categories.Refresh()" title="Refresh">Refresh</span>
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p setting-icon" onclick="Categories.Setting()" title="Setting">Setting</span>
        <span class="l-h-16 p-l-20 p-r-8 f-l hover-50 c-s-p menu-icon" onclick="accessdenied()" title="Menu">Menu</span>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>
<div class="grid_12- d-p-n">
    <div id="editor_box" class="b-d-c-ccc- p-r b-g-c-w- p-4">
        <div class="grid_x biz"></div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var category_type_value=<?php echo json_encode(array_keys($CategoryType))?>;
        var category_type_display=<?php echo json_encode(array_values($CategoryType))?>;
        $('#jqxTabBackendCategoryType').jqxTabs({
            theme: 'metro', height: 'auto',  scrollable: true, 
            selectionTracker: true, animationType: 'fade'
        }).on('selected', function (event) {
                if (event.args !== undefined) {
                    var filtervalue =category_type_value[event.args.item];
                    Categories.Filter('cate_type',filtervalue);
                }
        });
        $("#jqxTabBackend").jqxTabs({
            theme: 'metro', height: 'auto',  scrollable: true, 
            selectionTracker: true, animationType: 'fade',
            initTabContent: function(tab) {
                switch (tab) {
                    case 0:
                        tree_maps();
                        break;
                    case 1:
                        Categories.Refresh();
                        break;
                    case 2:
                        break;
                    case 3:
                        break;
                    case 4:
                        
                        break;
                    case 5:
                        
                        break;
                }
            }
        });
        Categories.OnInit();
    });
    function tree_maps(){
            
    }
</script>
<?php include APPPATH . 'views/views_backend/00_includes/03_foot.php'; ?>